<script setup lang="ts">
import { useDictStore } from '@/stores/module/dict'
import type { DictItem } from '@/types/common/dict'
import * as DIC from '@/LocalDict/dict'

const {
  modelValue,
  dictType,
  multiple = false,
  remote = false,
  width = '100%',
} = defineProps<{
  modelValue?: string | Array<string> | number | Array<number> | undefined
  dictType: string
  multiple?: boolean
  remote?: boolean
  width?: string
}>()

const emit = defineEmits<{
  'update:modelValue': [string | Array<string> | number | Array<number>]
}>()

const value = computed({
  get: () => modelValue,
  set: value => {
    emit('update:modelValue', value === undefined ? '' : value)
  },
})
const options = ref<DictItem[]>([])

const dictStore = useDictStore()

const loading = ref(false)

onMounted(async () => {
  if (remote) {
    loading.value = true
    options.value = await dictStore.getDictByType(dictType)
    loading.value = false
  } else {
    console.log(dictType)
    options.value = DIC[dictType as keyof typeof DIC]
    console.log(options.value)
  }
})
</script>
<template>
  <n-select
    :remote="remote"
    :multiple="multiple"
    clearable
    :options="options"
    :loading="loading"
    v-model:value="value"
    :style="{width}"
  />
</template>

<style scoped></style>
